@charset "UTF-8";
html {
  font-size: 14px; }

body {
  margin: 0;
  padding: 0;
  background: #eeeeee;
  font-family: 'Consolas', '微软雅黑';
  user-select: none;
  max-width: 450px; }
  body > div {
    max-width: 450px; }

.title {
  padding: 1rem 5%;
  background: steelblue;
  color: #ffffff;
  box-shadow: 0 0.2rem 0.3rem #303030;
  margin-bottom: 2rem; }
  .title h1 {
    margin: 0;
    padding: 0; }

.hidden {
  display: none; }

.container, .popup-num {
  padding-left: 5%; }
  .container .row > span, .popup-num .row > span {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    width: 10%;
    height: 24px;
    line-height: 24px;
    border: 1px solid #cccccc;
    border-right-width: 0;
    border-bottom-width: 0;
    background: #ffffff; }
    .container .row > span.col_g_right, .popup-num .row > span.col_g_right {
      border-right-width: 1px; }
    .container .row > span:first-child, .popup-num .row > span:first-child {
      border-left-width: 2px; }
    .container .row > span:last-child, .popup-num .row > span:last-child {
      border-right-width: 2px; }
    .container .row > span.fixed, .popup-num .row > span.fixed {
      background: #eeeeee; }
    .container .row > span.empty, .popup-num .row > span.empty {
      color: #ffffff; }
    .container .row > span.mark1, .popup-num .row > span.mark1 {
      background: lightblue; }
      .container .row > span.mark1.empty, .popup-num .row > span.mark1.empty {
        color: lightblue; }
    .container .row > span.mark2, .popup-num .row > span.mark2 {
      background: lightgreen; }
      .container .row > span.mark2.empty, .popup-num .row > span.mark2.empty {
        color: lightgreen; }
    .container .row > span.error, .popup-num .row > span.error {
      background: lightpink; }
      .container .row > span.error.empty, .popup-num .row > span.error.empty {
        color: lightpink; }
  .container .row.row_g_bottom > span, .popup-num .row.row_g_bottom > span {
    border-bottom-width: 1px; }
  .container .row:first-child > span, .popup-num .row:first-child > span {
    border-top-width: 2px; }
  .container .row:last-child > span, .popup-num .row:last-child > span {
    border-bottom-width: 2px; }

.popup-num {
  position: absolute;
  padding: 0; }
  .popup-num .row > span {
    width: 40px;
    height: 40px;
    line-height: 40px; }

.dashboard {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 450px;
  height: 3rem;
  padding: 1rem 0;
  background: steelblue;
  box-sizing: border-box;
  box-shadow: 0 -0.1rem 0.2rem #303030; }
  .dashboard .buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; }
    .dashboard .buttons button {
      float: left;
      width: 25%;
      font-size: 1.3rem;
      color: #ffffff;
      border: 1px solid #cccccc;
      background: transparent;
      border-right-width: 0;
      margin: 0;
      padding: 0;
      height: 100%; }
      .dashboard .buttons button:last-child {
        border-right-width: 1px; }
